<script setup>
import commonForm from '@/components/commonForm.vue';
import {
  createNewFormAsync
} from '@/api/flowManagement.js';
import router from '@/router';

const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  },
})

const emit = defineEmits(['closeDialog'])

const handleClose = () => {
  emit('closeDialog', false)
  router.push({ name: 'flowList' })
}


//保存/更新
const handleUpdate = () => {
  formRef.value.validForm(createNewForm)
}

//创建新表单
const createNewForm = async () => {
  try {
    console.log('%c [  ]-41', 'font-size:13px; background:pink; color:#bf2c9f;', formData.value)
    const params = {
      ...formData.value
    }
    const res = await createNewFormAsync(params)
    if (res) {
      ElMessage.success('创建表单成功,开始设计想要的表单吧！')

      console.log('%c [  ]-39', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      emit('closeDialog', res)
    }
  } catch (error) {
    console.log('%c [ error ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }
}

const dialogVisible = computed(() => props.visible)

//表单配置项
const optionList = ref([
  {
    data: {
      label: '表单名称',
      prop: 'name',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入表单名称'
    },
    width: '100px'
  },
  {
    data: {
      label: '表单标识key',
      prop: 'key',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入表单标识key'
    },
    width: '100px'
  },
  {
    data: {
      label: '表单描述',
      prop: 'description',
    },
    component: 'el-input',
    $attrs: {
      type: 'textarea',
      rows: 3,
      placeholder: '请输入表单描述'
    },
    width: '100px'
  },
])

//表单回显数据
const optionData = computed(() => props.roleInfo)

//表单校验规则
const optionRuleList = ref({
  name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
  key: [{ required: true, message: '请输入表单标识key', trigger: 'blur' }],
})


const formRef = ref(null)
const formData = ref({})

const updateFormData = (data) => {
  formData.value = data
}

</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" title="创建表单" width="500" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">

      <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" :optionData="optionData"
        @updateFormData="updateFormData">
      </commonForm>

      <template #footer>
        <div class="dialog-footer">
          <el-tooltip effect="dark" content="点击取消后，则无法设计表单，并跳转到【流程设计】!" placement="bottom">
            <el-button class="btn-blue" type="primary" @click="handleClose"> 取消</el-button>
          </el-tooltip>
          <el-button class="btn-green" type="primary" @click="handleUpdate">
            创建表单
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-button) {
  color: #fff;
  width: 100px;
  height: 35px;
  font-size: 16px;
  border-color: #c6c6c6;
}
</style>